<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./public/h+/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="./public/h+/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">

    <link href="./public/h+/css/animate.min.css" rel="stylesheet">
    <link href="./public/h+/css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <style>
        .contact-box {
            background-repeat: no-repeat;
            background-size: 100% 100%;
            color: white;
            border-radius: 5px;
        }

        .clearfix {
            background-color: rgba(0, 0, 0, 0.4);
            border-radius: 5px;
        }

        .text-center img {
            width: 96px;
            height: 96px;
            border: 2px solid white;
            margin-bottom: 10px;
        }

        address em {
            display: inline-block;
            width: 96px;
            height: 12px;
            background-color: #363c3c;
            margin-left: 10px;
        }

        address em i {
            display: block;
            height: 12px;
        }

        address em:nth-of-type(1) i {
            background-color: #1eca6b;
        }

        address em:nth-of-type(2) i {
            background-color: #f2c500;
        }

        address em:nth-of-type(3) i {
            background-color: #f59d00;
        }

        address em:nth-of-type(4) i {
            background-color: #cb8cff;
        }
        .color{
            background-color: #1AB394!important;
            color: white!important;
        }
        .del{
            position: relative;
            z-index: 999;
            float: right;
            display: none;
        }
    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div id="top">
            <div class="row">
                <h3 class="col-lg-11 col-md-10 col-sm-8 col-xs-6">英雄列表</h3>
                <div class=" col-lg-1 col-md-2 col-sm-4 col-xs-6 text-center">
                    <a href="index.php?c=addhero&a=jumppage">
                        <div class="btn btn-primary " data-toggle="modal" data-target="#myModal" style="margin-top: -10px;">
                            添加
                        </div>
                    </a>
                </div>
            </div>
            <div class="row">
                {{foreach $hero as $data}}
                <div class="col-sm-4">
                    <div class="contact-box" style=" background-image :url({{$data['big_img']}})">
                        <a href="index.php?c=profile&a=profiledata&id={{$data['id']}}">
                            <div class="col-sm-4">
                                <div class="text-center">
                                    <img alt="image" class="img-circle m-t-xs img-responsive" src="{{$data['img']}}">
                                    <div class="m-t-xs font-bold">
                                        {{$data['name']}}
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-8">
                                <h3>
                                    <strong>{{$data['big_name']}}</strong>
                                    <a href="index.php?c=hero&a=addHero&id={{$data['id']}}">
                                        <div class="btn btn-danger del">
                                            删除
                                        </div>
                                    </a>
                                </h3>
                                <p>{{$data['type']}}</p>
                                <address>
                                    生存:
                                    <em>
                                        <i style=" width: {{$data['live']*2}}0%;"></i>
                                    </em>
                                    <br> 物理:
                                    <em>
                                        <i style=" width: {{$data['physics']*2}}0%;"></i>
                                    </em>
                                    <br> 魔法:
                                    <em>
                                        <i style=" width: {{$data['magic']*2}}0%;"></i>
                                    </em>
                                    <br> 难度:
                                    <em>
                                        <i style=" width: {{$data['difficulty']*2}}0%;"></i>
                                    </em>
                                </address>
                            </div>
                            <div class="clearfix"></div>
                        </a>
                    </div>
                </div>
                {{/foreach}}
                <div class="text-center">
                    <ul class=" pagination pull-center">
                        {{if $page==0}}
                        <li class="paginate_button previous disabled">
                            <a>上一页</a>
                        </li>
                        {{else}}
                        <li>
                            <a href="index.php?c=hero&a=herodata&page={{$page-1}}">上一页</a>
                        </li>
                        {{/if}} 
                        {{for $i=0;$i<$heroRows;$i++}} 
                         {{if $i==$page}}
                        <li class="paginate_button previous disabled">
                            <a class="color">{{$i+1}}</a>
                        </li>
                        {{else}}
                        <li>
                            <a href="index.php?c=hero&a=herodata&page={{$i}}">{{$i+1}}</a>
                        </li>
                        {{/if}}
                            {{/for}} {{if $page==$heroRows-1}}
                            <li class="paginate_button previous disabled">
                                <a>下一页</a>
                            </li>
                            {{else}}
                            <li>
                                <a href="index.php?c=hero&a=herodata&page={{$page+1}}">下一页</a>
                            </li>
                            {{/if}}
                    </ul>
                </div>
            </div>
        </div>
        <script src="./public/h+/js/jquery.min.js?v=2.1.4"></script>
        <script src="./public/h+/js/bootstrap.min.js?v=3.3.6"></script>
        <script src="./public/h+/js/content.min.js?v=1.0.0"></script>
        <script>
            $(document).ready(function () { $(".contact-box").each(function () { animationHover(this, "pulse") }) });
        </script>
</body>
<script>
    let contact_box = document.querySelectorAll('.contact-box');
    let del = document.querySelectorAll('.del');
    for(let i=0;i<contact_box.length;i++){
         del[i].addEventListener('click', function (event) {
            event.stopPropagation();
            // contact_box[i].parentNode.parentNode.removeChild(contact_box[i].parentNode);
        })
        contact_box[i].addEventListener('mouseover',function(){
            del[i].style.display = "block";
           
        })
        contact_box[i].addEventListener('mouseout', function () {
            del[i].style.display = "none";
        }) 
    }
</script>
</html>